<template>
    <div>
        <!-- 头部 -->
        <div class="header">
            <div class="top-bar">
                <div class="back">
                    <a href="javascript:history.go(-1);">
                        <i class="fa fa-angle-left fa-lg" style="color:black"></i>
                    </a>
                </div>
                <div class="title">手机号快捷登录</div>
            </div>
            <!-- <van-nav-bar title="手机号快捷登录"  left-arrow /> -->
        </div>
        <div class="gap"></div>
        <!-- input框 -->
        <van-form>
            <van-field v-model="phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="[
                          {
                            validator: rulesTel,
                            trigger: 'onBlur',
                          },
                        ]">
            </van-field>
            <van-field v-model="code" center clearable label="验证码" placeholder="请输入短信验证码" :rules="[
                          {
                            validator: rulesCode,
                            trigger: 'onBlur',
                          },
                        ]">>
                <template #button>
                    <van-button size="small" color="#000" plain @click="getCode">发送验证码</van-button>
                </template>
            </van-field>
            <!-- 登录按钮 -->
            <div style="margin: 16px;">
                <van-button type="warning info" block native-type="submit" @click="onLogin">登录</van-button>
            </div>
        </van-form>
        <!-- 未注册信息提示 -->
        <div class="form-info">未注册的手机号码验证后自动创建点评账户</div>
        <div class="password-login">
            <router-link to="/login">账号密码登录</router-link>
        </div>
        <!-- 第三方账号登录 -->
        <div class="other-login">
            <div class="seperator">
                <div class="line"></div>
                <div class="text">　第三方账号登录　</div>
                <div class="line"></div>
            </div>
            <div class="icons">
                <router-link class="icon-qq" to="/other-login"></router-link>
                <!-- <a class="icon-qq"></a> -->
            </div>
        </div>
        <!-- 条款 -->
        <div class="agreement">
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox"></label>
            <div class="agreement-text">
                我已阅读并同意<a href="https://rules-center.meituan.com/m/detail/guize/4?activeRule=1">《美团用户服务协议》</a>、<a
                    href="https://rules-center.meituan.com/m/detail/guize/2?activeRule=1">《隐私政策》</a>等，接受免除或者限制责任、诉讼管辖约定等粗体标示条款
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Toast
    } from 'vant';
    export default {
        name: 'Register',
        data() {
            return {
                phone: '', // 手机号
                code: '', //验证码
                checked: false, //用户协议
                successCode: '', //登录成功用的验证码
            }
        },
        methods: {
            // 校验手机号
            rulesTel(val, rule) {
                if (!val) {
                    rule.message = '';
                    return false;
                }
                if (val.length < 11 || val.length > 11) {
                    rule.message = '请输入正确的手机号';
                    return false;
                }
                return true;
            },
            rulesCode(val, rule) {
                if (!val) {
                    rule.message = '';
                    return false;
                }
                if (val.length < 6 || val.length > 6) {
                    rule.message = '请输入正确的验证码';
                    return false;
                }
                return true;
            },
            async getCode() {
                const result = await this.$API.getCode();
                if (result.code === 200) {
                    this.code = result.msg;
                }
                console.log(result);
            },
            async onLogin() {
                const {
                    checked,
                    code
                } = this;
                if (!checked) {
                    this.$toast('请仔细阅读用户协议!');
                    return;
                }
                let flag = 0;
                const result = await this.$API.login({
                    phone: this.phone,
                    authCode: code,
                    flag
                });
                if (result.code == 200) {
                    localStorage.setItem('token', result.token);
                    Toast.loading('登录成功');
                    setTimeout(() => {
                        Toast.clear();
                        this.$router.push({
                            path: '/home'
                        })
                    }, 1000)
                } else {
                    Toast.loading(result.msg);
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .header {
        text-align: center;
        background: #fcfcfc;
        border-bottom: 1px solid #f63;
        padding: 0 15px;

        .top-bar {
            display: -webkit-inline-box;
            -webkit-box-pack: justify;
            -webkit-box-align: center;
            line-height: 45px;
            width: 100%;

            .back {
                display: block;
                -webkit-box-flex: 1;
                text-align: left;

                a {
                    display: block;
                    width: 100%;
                    height: 45px;
                    position: relative;
                    text-decoration: none;
                }
            }

            .title {
                font-size: 18px;
                -webkit-box-flex: 3;
                text-align: center;
            }

            .register {
                -webkit-box-flex: 1;
            }
        }
    }

    .gap {
        height: 10px;
    }

    .form-info {
        line-height: 12px;
        margin-top: 5px;
        text-align: center;
        color: #999;
    }

    .password-login {
        text-align: right;
        margin-top: 14.5px;
        margin-right: 15px;
        display: block;
        color: #466889;

    }

    .other-login {
        height: 100px;
        width: 100%;
        text-align: center;
        margin-top: 75px;

        .seperator {
            display: -webkit-box;
            -webkit-box-pack: justify;
            -webkit-box-align: center;
            padding: 0 15px;

            .line {
                background: #d7d7d7;
                height: 1px;
                -webkit-box-flex: 1;
            }

            .text {
                color: #999;
                font-size: 15px;
            }
        }

        .icons {
            width: 35px;
            margin: 20px auto 0;
            display: -webkit-box;
            -webkit-box-pack: justify;
            -webkit-box-align: center;

            .icon-qq {
                background: url(//www.dpfile.com/mod/app-m-login/0.1.41/css/img/oauth.png);
                width: 35px;
                height: 35px;
                font-size: 35px;
                background-size: 35px 105px;
                display: block;
                position: relative;
                -webkit-border-radius: 4.5px;
                border-radius: 4.5px;
            }
        }
    }

    .agreement {
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        top: 100%;
        height: 42px;
        margin-top: -62px;
        width: 100%;
        text-align: left;
        line-height: 16px;
        -webkit-padding-start: 12px;
        padding-inline-start: 12px;
        -webkit-padding-end: 12px;
        padding-inline-end: 12px;

        .agreement-text {
            margin-right: 18px;
            color: #999;
        }

        a {
            color: #466889;
            text-decoration: none;
        }
    }
</style>